import QtQuick 2.0
import QtQuick.Controls 2.5
import QtQml.Models 2.13

Item {
    id: root
    anchors.fill: parent
    readonly property int rowHeight: 25
    ListView {
        id: displayListView
        anchors.fill: parent
        anchors.left: parent.left
        anchors.right: parent.right
        height: root.rowHeight * 5
        model: displayDelegateModel
    }

    ListModel {
        id: myModel
        ListElement { name: "One"; role_value: 0; }
        ListElement { name: "One"; role_value: 2; }
        ListElement { name: "One"; role_value: 3; }
        ListElement { name: "One"; role_value: 4; }
        ListElement { name: "Two"; role_value: 5; }
        ListElement { name: "Three"; role_value: 6; }
        ListElement { name: "Four"; role_value: 7; }
        ListElement { name: "Five"; role_value: 8; }
        ListElement { name: "Six"; role_value: 9; }
        ListElement { name: "Seven"; role_value: 10; }
        ListElement { name: "Eight"; role_value: 11; }
        ListElement { name: "hello"; role_value: 12; }
    }
    DelegateModel {
        id: displayDelegateModel
        delegate: displayDelegate
        model: myModel
        groups: [
            DelegateModelGroup {
                includeByDefault: false
                name: "displayField"
            }
        ]
        filterOnGroup: "displayField"
        Component.onCompleted: {
            var rowCount = myModel.count;
            items.remove(0,rowCount);
            for( var i = 0;i < rowCount;i++ ) {
                var entry = myModel.get(i);
//                        if(entry.role_display !== undefined) {
                    items.insert(entry, "displayField");
//                        }
            }
        }
    }
    Component{
        id: displayDelegate

        Rectangle {
            anchors.left: parent.left
            anchors.right: parent.right
            height: root.rowHeight
            //color: "gray"
            border.color: "lightgray"

            Text {
                text: name
                anchors.centerIn: parent
            }
        }
    }
}
